<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport"
		  content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="format-detection" content="telephone=no">

	<title>打卡兑换</title>
	<link rel="stylesheet" type="text/css" href="public/css/style.css">
	<link rel="stylesheet" type="text/css" href="public/weui/css/weui.min.css">
	<link rel="stylesheet" type="text/css" href="public/weui/css/jquery-weui.css">
	<link rel="stylesheet" type="text/css" href="public/weui/css/demos.css">

</head>
<body>
<div class="weui-panel weui-panel_access">
	<div class="weui-media-box__hd weui-div-box">
		<img src="public/img/huodong.jpg"  />
	</div>
	<div class="weui-panel__ft">
	</div>
	<div class="weui-tab weui-div-tab">
		<div class="weui-navbar">
			<a class="weui-navbar__item weui-bar__item--on" href="#tab1"> 未领取 </a>
			<a class="weui-navbar__item" href="#tab2"> 已领取 </a>
			<a class="weui-navbar__item" href="#tab3"> 已过期 </a>
		</div>
		<div class="weui-tab__bd">
			<div id="tab1" class="weui-tab__bd-item weui-tab__bd-item--active">

			</div>
			<div id="tab2" class="weui-tab__bd-item">

			</div>
			<div id="tab3" class="weui-tab__bd-item">

			</div>
		</div>
	</div>

	<script type="text/javascript" src="public/js/jquery-3.1.0.min.js"></script>
	<script type="text/javascript" src="public/js/common.js"></script>
	<script type="text/javascript" src="public/js/wxconfig.js"></script>
	<script type="text/javascript" src="public/weui/js/jquery-weui.js"></script>
	<script type="text/javascript" src="public/js/jquery.tmpl.min.js"></script>


	<script id="unclaimedTemplate" type="text/x-jquery-tmpl">
		  <div class="weui-panel weui-panel_access">
			 <div class="weui-div-tab-left">
				<div>
					<span class="data-price">${money}元</span>
					<span class="data-perid">有效期至${dateTime}</span>
					<p class="data-phase">连续${day}天返现</p>
					<p class="data-imei">IMEI:${deviceNumber}</p>
				</div>
			 </div>
			 <div class="weui-div-tab-right">
				<span onclick="unclaimed(${id})">领取</span>
			 </div>
		 </div>
	</script>
	<script id="claimedTemplate" type="text/x-jquery-tmpl">
		  <div class="weui-panel weui-panel_access">
			 <div class="weui-div-tab-left">
				<div>
					<span class="data-price">${money}元</span>
					<span class="data-perid">有效期至${dateTime}</span>
					<p class="data-phase">连续${day}天返现</p>
					<p class="data-imei">IMEI:${deviceNumber}</p>
				</div>
			 </div>
			 <div class="weui-div-tab-right">
				<span>已领取</span>
			 </div>
		 </div>
	</script>
	<script id="expiredTemplate" type="text/x-jquery-tmpl">
		  <div class="weui-panel weui-panel_access">
			 <div class="weui-div-tab-left">
				<div>
					<span class="data-price">${money}元</span>
					<span class="data-perid">有效期至${dateTime}</span>
					<p class="data-phase">连续${day}天返现</p>
					<p class="data-imei">IMEI:${deviceNumber}</p>
				</div>
			 </div>
			 <div class="weui-div-tab-right">
				<span>已过期</span>
			 </div>
		 </div>
	</script>
	<script>
		$(function(){
			//tixian.html 返回的时候重新刷新页面, IOS需要
			window.addEventListener('pageshow', function(e) {
				// 通过persisted属性判断是否存在 BF Cache
				if (e.persisted) {
					location.reload();
				}
			});
			$.ajax({
				url: requestPath + "/punch/getPunchRecord",
				type: "post",
				dataType: 'json',
				contentType: "application/json; charset=utf-8",
				success: function (r) {
					if (r.code == 200) {
						var unclaimedList = eval(r.unclaimedData);
						var claimedList = eval(r.claimedData);
						var expiredList = eval(r.expiredData);
						$('#unclaimedTemplate').tmpl(unclaimedList).appendTo('#tab1');
						$('#claimedTemplate').tmpl(claimedList).appendTo('#tab2');
						$('#expiredTemplate').tmpl(expiredList).appendTo('#tab3');
					}
				}
			});
		})

		/**
		 * 领取
		 * @param id
		 */
		function unclaimed(id){
			if(id != null || id != ''){
				$.modal({
					title: "提示",
					text: "确认要领取吗? 领取后将退款到您的余额, 可能会多笔到账, 请您耐心等待.",
					buttons: [
						{ text: "取消", className: "default", onClick: function(){ return} },
						{ text: "确认领取", onClick: function(){
							var data = {
								'id':id,
								'prize':1
							}
							$.ajax({
								url: requestPath + "/punch/updatePunchRecord",
								type: "post",
								dataType: 'json',
								data: JSON.stringify(data),
								contentType: "application/json; charset=utf-8",
								success: function (r) {
									if (r.code == 200) {
										window.location.href= htmlPath + "/tixian.html";
									}
								}
							});

						} }
					]
				});
			}
		}
	</script>
</body>
</html>